<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宫崎骏世界—注册</title>
    <link rel="icon" href="/img/minecraft.png" sizes="16x16">

    <style type="text/css" media="all">
        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; /* 可选：添加背景颜色 */
        }

        .warning {
            border: 10px ridge #ad9e5f;
            background-color: #fbda41;
            padding: 1rem;
            width: 300px; /* 调整宽度以适应内容 */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start; /* 确保label和input左对齐 */
            text-align: left; /* 确保文本左对齐 */
        }

        .warning form {
            width: 100%; /* 让表单占据整个.warning容器的宽度 */
        }

        .warning form label {
            display: block; /* 让label成为块级元素 */
            margin-bottom: 0.5em; /* 给label和input之间增加一些间距 */
        }

        .warning form input,
        .warning form select {
            width: calc(100% - 20px); /* 使输入框和下拉菜单宽度适应容器，留出一些空白 */
            box-sizing: border-box; /* 确保内边距不会增加元素的宽度 */
            margin-bottom: 1em; /* 增加输入框之间的间距 */
        }

        .warning form button {
            width: 60px;
            margin-top: 1em; /* 增加按钮与输入框之间的距离 */
        }

        .warning form a {
            margin-top: 1em; /* 调整链接的位置 */
        }
    </style>
</head>

<body>
<div class="warning">
    <form id="registerForm">
        <label for="username">用户名：</label>
        <input id="username" type="text" required>
        
        <label for="password">密码：</label>
        <input id="password" type="password" required>
        
        <label for="role">用户类别：</label>
        <select id="role" name="role" required>
            <option value="student">学生</option>
            <option value="teacher">教师</option>
            <option value="admin">管理员</option>
        </select>
        
        <button id="registerButton" type="submit">注册</button>
    </form>
</div>

<script>
document.getElementById('registerForm').addEventListener('submit', async function(event) {
    event.preventDefault(); // 阻止默认的表单提交行为

    // 获取用户输入的凭据
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const role = document.getElementById('role').value;

    // 发送POST请求到服务器，包含用户的凭据
    try {
        const response = await fetch('/test.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password, role }) // 使用对象字面量
        });

        // 解析服务器的响应
        const data = await response.json();

        // 根据服务器的响应处理结果
        if (data.success) {
            alert('注册成功！');
        } else {
            // 注册失败，显示错误信息
            alert(data.message);
        }
    } catch (error) {
        console.error('注册请求失败:', error);
        alert('注册过程中发生错误，请检查网络连接或稍后重试。');
    }
});
</script>
</body>
</html>